import React from 'react';
import { connect } from 'dva';
import { Tree, Button, Table, Form, Input, Select, Popconfirm, DatePicker } from 'antd';

const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;
const Option =Select.Option;

function Maintenant({ dispatch, maintenant, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;

    const columns = [{
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 120,
    },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 100,
    },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 140,
    },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 120,
    },{
        title: 'RFID号',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
    },{
        title: '所在位置',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 100,
    },{
        title: '维保到期提醒',
        dataIndex: 'remind',
        key: 'remind',
        width: 120,
    },{
        title: '维保到期时间',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
    },{
        title: '供货方',
        dataIndex: 'supplier',
        key: 'supplier',
        width: 100,
    },{
        title: '联系人',
        dataIndex: 'contacts',
        key: 'contacts',
        width: 100,
    },{
        title: '联系电话',
        dataIndex: 'contactsPhone',
        key: 'contactsPhone',
        width: 100,
    },{
        title: '售后电话',
        dataIndex: 'hotline',
        key: 'hotline',
        width: 100,
    }
];

    const pagination = {
        current:maintenant.current,
        pageSize:maintenant.currentSize,
        total: maintenant.total,
        showSizeChanger: true,
        showTotal: (total => '共' + maintenant.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'maintenant/qryListByParams',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'maintenant/qryListByParams',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':maintenant.currentSize} },
            });
        },

    };

    function handleClear(){
      form.resetFields();
    }

    const submitHandle = () => {
        dispatch({
            type: 'maintenant/qryListByParams',
            payload: { ...getFieldsValue()},
        });
    }
    return (
        <div style={{backgroundColor:'#fff'}}>
            <div style={{minHeight:'100%'}}>
                <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                <Form layout="inline" >                   
                    <FormItem>
                        {getFieldDecorator('expirationTime')(
                            <RangePicker />
                        )}
                    </FormItem>
                     <FormItem>
                            {getFieldDecorator('assetName')(<Input  placeholder="请输入设备名称模糊查找" style={{ width: '150px' }}/>)}
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('rfidNo')(<Input  placeholder="请输入RFID查找" style={{ width: '150px' }}/>)}
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('assetNo')(<Input  placeholder="请输入资产编号查找" style={{ width: '150px' }}/>)}
                    </FormItem>
                    <FormItem >
                            {getFieldDecorator('serialNo')(<Input  placeholder="请输入资产序列号查找" style={{ width: '150px' }}/>)}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('timeType', {
                            initialValue: maintenant.timeType,                            
                          })(
                          <Select
                            style={{ width: 120 }}
                            placeholder="到期时间"
                          >
                              <Option value="0">全部</Option>
                              <Option value="1">一个月到期</Option>
                              <Option value="2">两个月到期</Option>
                              <Option value="3">三个月到期</Option>
                         </Select>
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('type', {
                            initialValue: maintenant.type,                            
                          })(
                          <Select
                            style={{ width: 110 }}
                            placeholder="选择是否到期"
                          >
                              <Option value="0">全部</Option>
                              <Option value="1">已到期</Option>
                              <Option value="2">未到期</Option>
                         </Select>
                      )}
                    </FormItem>
                    <FormItem>
                      <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>
                </Form>
                </div>
                <div style={{width:'100%',padding:"30px 20px",}}>
                    <Table columns={columns} rowKey={record => record.id_} scroll={{ x: 1800 }} loading={loading} dataSource={maintenant.list}  pagination={pagination}
                    />
                </div>
            </div>
        </div>
    );

}

function mapStateToProps(state) {
  return { maintenant : state.maintenant,loading:state.loading.models.maintenant};
}

Maintenant = Form.create()(Maintenant);

export default connect(mapStateToProps)(Maintenant);
